<template>
  <div
    class="rate-item component-item"
    :style="{paddingLeft: data.config.labelWidth}"
  >
    <label
      class="component-label"
      :style="{width: data.config.labelWidth}"
    >{{data.config.labelName}}</label>
    <Rate
      :value="data.value"
      :count="data.config.count"
      :disabled="data.config.disabled"
      :showText="data.config.showText"
      :allowHalf="data.config.allowHalf"
      :clearable="data.config.clearable"
      :character="data.config.character"
      :customIcon="data.config.customicon"
      @on-change="changeValue"
    />
  </div>
</template>

<script>
export default {
  props: ['data', 'index'],
  data () {
    return {};
  },
  methods: {
    changeValue (value) {
      this.$emit('updateResult', {
        value,
        index: this.index
      });
    }
  }
};
</script>

<style lang="less" scoped>
.component-item {
  position: relative;
  label.component-label {
    display: inline-block;
    text-align: left;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 32px;
  }
}
</style>
